<template>
    <div>
        <a-form :form="form" layout="inline" @submit.prevent="onSubmit" :style="{marginBottom: '20px'}" id="decideForm">
            <div class="device-query">
                <a-form-item>
                    <a-input placeholder="请输入设备型号" v-decorator="['sn']"/>
                </a-form-item>
                <a-form-item>
                    <a-select v-decorator="['type']" placeholder="设备类型">
                        <a-select-option v-for="v in types" :key="v.id" :value="v.id">
                            {{v.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :style="{flexGrow: 1}">
                    <a-button type="primary" html-type="submit">筛选</a-button>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" style="width:140px;" v-if="menu_role.includes('/devicemodel/create')" @click="showCreate" icon="plus">新增设备类型</a-button>
                </a-form-item>
            </div>
        </a-form>

        <a-table :columns="columns" :dataSource="tableData" rowKey="id" :pagination="pagination" bordered>
            <span slot="action" slot-scope="text, record">
                <div class="delete-image">
                <router-link  v-if="menu_role.includes('/devicemodel/update')" :to="'/devicemodel/update/'+record.id"><img src="./../../assets/images/view.svg"
                                                                    alt=""></router-link>
                 <a href="#"  v-if="menu_role.includes('/devicemodel/delete')" @click.stop.prevent="handleDelete(record)"><img
                         src="./../../assets/images/delete.svg" alt=""></a>
                </div>
            </span>
        </a-table>

        <a-modal v-model="showcreate" title="添加设备型号" @ok="createSubmit"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 centered
                 :keyboard = 'false'
                 okText = '确认'
                 :maskClosable = 'false'>
            <create ref="create" :types="types" @getList="getList"  @hideCreate="hideCreate"></create>
        </a-modal>
    </div>
</template>


<script>
    import Create from "./create"
    export default {
        components: {Create},
        data() {
            return {
                pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 10,
                    showQuickJumper: true,
                    onChange: (page, size) => {
                        this.handleChange(page, size)
                    },
                },
                form: this.$form.createForm(this),
                tableData: [],
                columns: [
                    {title: '编号', dataIndex: 'id', align: 'center'},
                    {title: '设备型号', dataIndex: 'name', align: 'center'},
                    {title: '设备类型', dataIndex: 'type', align: 'center'},
                    {title: '设备个数', dataIndex: 'device_count', align: 'center'},
                    {title: '备注', dataIndex: 'remark', align: 'center'},
                    {title: '操作', scopedSlots: {customRender: 'action'}, align: 'center'},
                ],
                search: {},
                types: [],
                showcreate: false,
            };
        },

        mounted() {
            this.getList();
        },
        methods: {
            async getList(param = {}) {
                let req = {page_size: this.pagination.pageSize, page: this.pagination.current};

                let data = await this.http(
                    "get",
                    "devicemodel/index",
                    {...req, ...param}
                );
                this.tableData = data.data;
                this.types = data.types
                this.pagination.total = data.total_count;
            },
            onSubmit() {
                //搜索提交

                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.pagination.current = 1;
                        this.search = values
                        this.getList(values);
                    }
                })
            },
            showCreate() {
                this.showcreate = true;
            },
            hideCreate() {
                this.showcreate = false;
            },
            createSubmit() {
                //新增提交
                this.$refs.create.onSubmit()
            },
            handleChange(page, size) {
                //列表展示条数改变
                this.pagination.current = page;
                this.pagination.pageSize = size;
                this.getList(this.search);
            },
            handleDelete(row) {
                var that = this;
                this.$confirm({
                    title: '删除型号',
                    content: '你确定要删除该型号吗？',
                    onOk() {
                        that.deleteData(row.id).then(res => {
                            if (res.status == "success") {
                                that.$message.success(res.msg, 1);
                                that.getList();
                            } else {
                                that.$message.error(res.msg, 1);
                            }
                        });
                    },
                    onCancel() {
                    },
                });
            },
            async deleteData(id) {
                let data = await this.http("delete", "devicemodel/delete", {id: id});
                return data;
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./../../assets/scss/mixin";
    #decideForm {
        .ant-input {
            width: 200px;
        }

        .ant-select {
            width: 150px;
        }
    }
    .device-query {
        @include fj(space-between);
        .ant-form-item + .ant-form-item{
            margin-left: 10px;
        }
    }
</style>
